<template>
  <div>
    <!-- 1.定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>消息管理</el-breadcrumb-item>
      <el-breadcrumb-item>反馈列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2.定义卡片视图 -->
    <el-card class="box-card">
      <!-- 3.定义栅格的一行 :gutter="20"定义行间距   :span="9" 占位符  -->
      <el-row :gutter="20">
        <el-col :span="9">
          <!-- 3.定义搜索框 -->
          <el-input
            placeholder="请输入反馈内容"
            v-model="queryInfo.query"
            clearable
            @clear="getFeedbackList"
          >
            <el-button slot="append" icon="el-icon-search" @click="getFeedbackList"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 评论数据表格展现  border 边框线属性  -->
      <el-table :data="feedbackList" border stripe>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="userName" label="反馈人">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.user.userName==null?'无':scope.row.user.userName }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="反馈内容"></el-table-column>
        <el-table-column prop="reply" label="反馈回复"></el-table-column>
        <el-table-column prop="createTime" label="反馈时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="deleteFeedback(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 定义分页组件 关于分页插件的属性说明
            1.@size-change 如果分页中每页实现的条数发生变化 则会触发这个该事件
            2.@current-change 当页数发生改变时,触发该函数
            3.current-page 当前选中的页
            4.page-sizes   页面数据展现的选项
            5.page-size    默认选中的页数
            6.layout    分页中展现的数据种类
            7.total     记录总数
      -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>

export default {
  data() {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10
      },
      feedbackList: [],
      //记录总数是数值类型
      total: 0
    }

  },
  methods: {
    async getFeedbackList() {
      const { data: result } = await this.$http.get('/feedback/getList', {
        params: this.queryInfo
      })
      if (result.status !== 200) return this.$message.error("反馈列表查询失败")
      this.feedbackList = result.data.rows
      this.total = result.data.total
      console.log("总记录数:" + this.total)
    },
    handleSizeChange(pageSize) {
      //console.log("每页展现的条数"+pageSize)
      this.queryInfo.pageSize = pageSize
      this.getFeedbackList()
    },
    handleCurrentChange(pageNum) {
      //console.log("页数:"+pageNum)
      this.queryInfo.pageNum = pageNum
      this.getFeedbackList()
    },
    async deleteFeedback(feedback) {
      //1.消息确认框
      const result = await this.$confirm('此操作将删除反馈, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)

      //如果确认  confirm  如果取消 cancel
      if (result !== 'confirm') {
        return this.$message.info("删除取消")
      }
      const { data: result2 } = await this.$http.post(`/feedback/delete`,feedback)
      if (result2.status !== 200) return this.$message.error("删除失败")
      this.$message.success("删除成功")
      //重新加载 数据
      this.getFeedbackList()
    }
  },
  //利用钩子函数实现数据查询
  mounted() {
    this.getFeedbackList()
  }
}
</script>


<style lang="less" scoped>
</style>
